MyApp provides JavaScript best practices including:
1) Using namespaces to avoid naming collisions and define packages like MyApp.string.utils for reusable functions.
2) Branching code during initialization or lazily on first use to handle browser differences efficiently.
3) Passing configuration as an object instead of many parameters to simplify function calls.
4) Defining private methods and properties using closures to encapsulate code.
5) Employing self-executing functions for one-time initialization tasks.
6) Allowing method chaining for readability when calling several related methods.
4. Introduction: What will we cover today?
• Coding patterns
JavaScript-specific best practices
• Design patterns
Language independent patterns, UI architecture
14. Tip of the day
“Branch some parts of the browser-specific code
during initialization, when the script loads, rather
than during runtime to avoid performance hit.”
18. Tip of the day
“The lazy definition pattern is very similar to the
previous init-time branching pattern.
The difference is that the branching happens only
when the function is called for the first time.”
22. Tip of the day
“Instead of having many parameters, you can use
one parameter and make it an object.
The properties of the object are the actual
parameters.”
24. Configuration object: Usage of configuration object
var MyApp = MyApp || {};
MyApp.namespace(quot;domquot;);
MyApp.dom.Button = function(text, settings) {
var type = settings.type || 'submit';
var font =settings.font ||'Verdana';
//..other props
//some code here
}
27. Tip of the day
“Use local variables and methods inside a
constructor to achieve the “private” level of
protection.
Use naming conventions _doInternalOperation to
show that the function is private/protected.”
28. Private methods and properties: Private method
var MyApp = MyApp || {};
MyApp.namespace(quot;domquot;);
MyApp.dom.Button = function(text, settings) {
//..process properties
function setStyle(element, settings) {
//setting style to element
};
var button = //...
//..
setStyle(button,settings);
this.clone = function() {
var clonedButton = //...
//...
setStyle(clonedButton, settings);
}
//some code here
}
40. Unobtrusive JavaScript: Separate JavaScript functionality
<a onclick=quot;doSomething()quot; href=quot;#quot;>Click!</a>
<a href=quot;backuplink.htmlquot; class=quot;doSomethingquot;>Click!</a>
$('a.doSomething').click(function(){
// Do something here!
alert('You did something, woo hoo!');
});
41. Unobtrusive JavaScript: Never depend on JavaScript
<script type=quot;text/javascriptquot;>
var now = new Date();
if(now.getHours() < 12)
document.write('Good Morning!');
else
document.write('Good Afternoon!');
</script>
<p title=quot;Good Day Messagequot;>Good Morning!</p>
var now = new Date();
if(now.getHours() >= 12)
{
var goodDay = $('p[title=quot;Good Day Messagequot;]');
goodDay.text('Good Afternoon!');
}
42. Unobtrusive JavaScript: Never depend on JavaScript
<a href=quot;javascript:window.open('page.html')quot;>my page</a>
<a href=quot;#quot; onclick=quot;window.open('page.html')quot;>my page</a>
<a href=quot;page.htmlquot; onclick=quot;window.open(this.href)quot;>my page</a>
<a href=quot;page.htmlquot; class=quot;popupquot;>my page</a>
//some java script to open element with class quot;.popupquot; in a new window